import classNames from "classnames";
import { useState } from "react";
import "./index.scss";

const PopConfirm = ({ children, title, onConfirm, onCancel }) => {
  // 控制组件显隐
  const [visible, setVisible] = useState(false);
  const handleClick = () => {
    setVisible(true);
  };

  // 点击确定按钮
  const handleConfirm = (e) => {
    e.stopPropagation();
    onConfirm && onConfirm();
    setVisible(false);
  };

  // 点击取消按钮
  const handleCancel = (e) => {
    onCancel && onCancel();
    e.stopPropagation();
    setVisible(false);
  };

  return (
    <span className="zh-pop-box" onClick={() => handleClick()}>
      {children}
      <div className={classNames(visible ? "zh-pop-show" : "zh-pop-not-show")}>
        <div className="zh-pop-box-title">{title}</div>
        <div className="zh-pop-box-btn">
          <button
            className="zh-pop-box-button zh-pop-box-button-cancel"
            onClick={(e) => handleCancel(e)}
          >
            取消
          </button>
          <button
            className="zh-pop-box-button zh-pop-box-button-confirm"
            onClick={(e) => handleConfirm(e)}
          >
            确定
          </button>
        </div>
      </div>
    </span>
  );
};

export default PopConfirm;
